<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }

        #box {
            width: 100%;
            height: 100%;
        }

        #box ul {
            width: 100%;
            height: 100%;
            list-style: none;
            position: relative;
        }

        #box ul li {
            width: 250px;
            height: 360px;
            /*border: 1px solid #000;*/
            position: absolute;
            /*left: 0;*/
            /*top: 0;*/
            background-color: #fff;
            transition: all 1s;
            box-shadow: 0 0 3px #000;
        }

        #box li img {
            width: 250px;
            height: 360px;
        }

        #box ul li.curr {
            transform: rotate(0deg) translate(-50%, -50%) scale(1.5) !important;
            /*transform: rotate(90deg) !important;*/

            left: 50% !important;
            top: 50% !important;
            z-index: 998;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/05.jpg" alt=""></li>
            <li><img src="images/06.jpg" alt=""></li>
            <li><img src="images/07.jpg" alt=""></li>
            <li><img src="images/08.jpg" alt=""></li>
            <li><img src="images/09.jpg" alt=""></li>
            <li><img src="images/10.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        // 1.获取标签
        var box = document.querySelector('#box');
        var ul = box.children[0];
        var lis = ul.children;

        //获取屏幕的宽度/高度
        var pinW = document.documentElement.clientWidth - 250;
        var pinH = document.documentElement.clientHeight - 360;
        
        for (var i = 0; i < lis.length; i++) {
            var ele = lis[i];
            //位置随机
            var x = getRandom(0,pinW);
            var y = getRandom(0,pinH);

            ele.style.left = x + 'px';
            ele.style.top = y + 'px';

            //随机旋转角度
            var angle = getRandom(0,360);
            ele.style.transform = 'rotate('+angle+'deg)';

            //给每一个li添加绑定事件
            ele.onclick = function () {
                for(var i = 0; i < lis.length; i++){
                    lis[i].className = '';
                }
                this.className = 'curr'
            }
            
        }

        function getRandom(min, max) {
            //Math.random()返回0到1之间的伪随机数
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        
    </script>
</body>

</html>